<script setup lang="ts">
import Panel from '@/components/panel.vue'
import Chart2 from '@/components/chart2.vue'
import Chart1 from '@/components//chart1/index.vue'
import Chart3 from '@/components/chart3/index.vue'
import Chart4 from '@/components/chart4/index.vue'
import Chart5 from '@/components/chart5/index.vue'
import Chart6 from '@/components/chart6/index.vue'
import Radar from '@/components/radar/index.vue'
</script>
<template>
  <div class="content">
    <div class="box1">
      <Panel class="chart1"><Chart1></Chart1></Panel>

      <div class="chartn chart2">
        <Chart2></Chart2>
      </div>
      <div class="chartn chart3">
        <Chart3></Chart3>
      </div>
    </div>
    <div class="box2">
      <Panel class="chart4"><Chart4></Chart4> </Panel>
      <Panel class="chart5">
        <Chart5></Chart5>
      </Panel>
      <Panel class="chart6"><Chart6></Chart6></Panel>
    </div>
  </div>
</template>
<style scoped lang="scss">
.content {
  // background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(7, 26, 87, 0.682);
}
.box1 {
  width: 90vw;
  height: 40vh;
  margin: 10px;
  // background-color: antiquewhite;
  margin-top: vh(30);
  display: flex;
  justify-content: space-around;
  align-items: center;
  // z-index: 10000;
}
.box2 {
  width: 90vw;
  height: 40vh;
  margin: 10px;
  // background-color: azure;
  display: flex;
  justify-content: space-around;
  align-items: center;
  // z-index: 10000;
}

.chart,
.chartn {
  display: inline-block;
  width: vw(500);
  height: vh(400);
  padding: vw(10);
  margin: vw(10);
}
</style>
